<template>
  <hi-page-container>
    <hi-table
      :search-column="searchColumn"
      :column="column"
      :table-data="tableData"
      :loading="loading"
      :pagination.sync="pagination"
      @page-change="getTableData"
      @query-select="querySelect"
    >
      <el-button type="primary" icon="el-icon-plus" @click="$refs.modify.open()">新增</el-button>
      <template #action="{ row }">
        <el-button type="text" @click="$refs.modify.open({ ...row })">编辑</el-button>
        <el-button type="text" class="btn-delete" @click="deleteRow(row)">删除</el-button>
      </template>
    </hi-table>

    <modify ref="modify" @get-list="getTableData" />
  </hi-page-container>
</template>
<script>
import modify from "./modify";
export default {
  components: {
    modify,
  },
  data() {
    return {
      // 筛选条件 type 支持 Input|Select|Date|Datetime|Month|Year|Daterange|Monthrange|Datetimerange
      searchColumn: [
        {
          label: "姓名：",
          placeholder: "请输入姓名",
          parameter: "name",
        },
      ],
      // 分页
      pagination: {
        total: 0,
        page: 1,
        limit: 10,
      },
      // 表头
      column: [
        {
          label: "不可过滤",
          prop: "name",
          minWidth: '100px'
        },
        {
          label: "操作",
          slot: "action",
          fixed: "right",
          filter: false,
          width: 100,
        },
      ],
      // 列表数据
      tableData: [],
      // table 数据加载 loading
      loading: false,
      // 模糊搜索
      search: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData() {
      try {
        this.loading = true;
        // 在这里发送请求
        const res = await this.$api("", {
          data: {
            ...this.pagination,
            ...this.search,
          },
        });
        this.tableData = res.data.content;
        this.pagination.total = res.data.counts;
      } catch (err) {
        this.$log.error(err);
      }
      this.loading = false;
    },
    // 模糊搜索
    querySelect(search) {
      this.search = search;
      this.getTableData();
    },
    // 删除列表中某一行数据
    deleteRow(row) {
      this.$msgbox({
        title: "消息",
        message: "删除后无法恢复，是否确认删除？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            try {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              await this.$api("");

              if (this.pagination.page > 1 && this.tableData.length <= 1)
                this.pagination.page--;
              this.getTableData();
              done();
            } catch (err) {
              this.$log.error(err);
            }
            instance.confirmButtonLoading = false;
            instance.confirmButtonText = "确定";
          } else {
            done();
          }
        },
      });
    },
  },
};
</script>
